<template>
  <div>
    <van-nav-bar title="收益明细">
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        slot="left"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>

    <van-tabs v-model="active" line-width="50%">
      <van-tab title="分润明细">
        <van-empty v-if="count1 == ''" description="暂无数据,请下拉刷新重试!" />
        <div v-else>
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->

              <div
                slot="default"
                class="item"
                v-for="(item, index) in detailsList"
                :key="'a' + index"
                @click="incomeClick(item)"
              >
                <div class="item-left">
                  <h5>{{ item.createTime | getsubMouth }}</h5>
                  <div class="time">{{ item.createTime | getMM }}</div>
                </div>
                <div class="item-count">
                  <img
                    src="../../assets/image/img_all_map.png"
                    alt=""
                    width="100%"
                    height="100%"
                  />
                  <img
                    src="../../assets/image/icon_all_location.png"
                    width="55"
                    height="65"
                    alt=""
                    class="imgAddress"
                  />
                  <p class="txtadd">上海移动</p>
                  <p class="address">上海</p>
                </div>
                <div class="item-right">
                  <p class="money">+{{ item.acqAmount }}</p>
                  <p class="phone">
                    来自尾号<span class="model">{{
                      item.acqphone | getsubPhone
                    }}</span
                    >的收益
                  </p>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>

      <van-tab title="返佣明细">
        <van-empty
          v-if="rebateDetailsList == ''"
          description="暂无数据,请下拉刷新重试!"
        />
        <div v-else>
          <van-pull-refresh v-model="isLoadings" @refresh="onRefres">
            <van-list
              v-model="loadings"
              :finished="finisheds"
              finished-text="没有更多了"
              @load="onLoads"
            >
              <div
                class="rebate"
                v-for="(item, index) in rebateDetailsList"
                :key="'b' + index"
                @click="rebatedClick(item)"
              >
                <div class="rebateLeft">
                  <img
                    src="../../assets/logo.png"
                    width="35"
                    height="35"
                    alt=""
                  />
                  <div>
                    <p>来自尾号{{ item.oriphone | getsubPhone }}的收益</p>
                    <p class="rebateLeft-time">{{ item.createTime }}</p>
                  </div>
                </div>
                <p class="right">+{{ item.acqAmount }}</p>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  queryProfitDetailsInfoApi,
  queryRebateDetailsInfoApi,
  //   queryMobileAreaInfoApi,  returningaservant
} from "network/ApiServe";
export default {
  name: "IncomeDetails",
  filters: {
    getsubPhone(phone) {
      return phone.substring(7);
    },
    getsubMouth(mount) {
      return mount.substring(10, 0);
    },
    getMM(mm) {
      return mm.substring(11);
    },
  },
  created() {
    this.userId = localStorage.getItem("userId");
    this.phone = localStorage.getItem("phone");
  },
  data() {
    return {
      isLoading: false,
      active: 2,
      count1: [{ cont: "1" }],
      count2: [{ name: "2" }],
      page: 0,
      totalPages: 0,
      start_time: "",
      end_time: "",
      detailsList: [],

      list: [],
      loading: false,
      finished: false,

      pages: 0,
      talPages: 0,
      rebateDetailsList: [],
      isLoadings: false,
      finisheds: false,
      loadings: false,
    };
  },
  mounted() {
    this.getProfitDetailsInfo(this.userId, this.page);
    this.getRebateDetailsInfo(this.pages);
  },
  methods: {
    rebatedClick(item) {
      console.log(item);
      this.$router.push({
        name: "RebateDetails",
        params: {
          acqAmount: item.acqAmount,
          acqphone: item.acqphone,
          amount: item.amount,
          ordercode: item.ordercode,
          createTime: item.createTime,
          remark: item.remark,
        },
      });
    },
    incomeClick(item) {
      console.log(item);
      this.$router.push({
        name: "IncomeDetailsItem",
        params: {
          amount: item.amount,
          orirate: item.orirate * 100 + "%",
          oriphone: item.oriphone,
          ordercode: item.ordercode,
          remark: item.remark,
          createTime: item.createTime,
          acqAmount: item.acqAmount,
        },
      });
    },

    onRefresh() {
      setTimeout(() => {
        this.detailsList = [];
        this.isLoading = false;
        this.page = 0;
        this.getProfitDetailsInfo(this.userId, this.page);
      }, 1000);
    },
    //返佣
    onRefres() {
      setTimeout(() => {
        this.rebateDetailsList = [];
        this.isLoadings = false;
        this.pages = 0;
        this.getRebateDetailsInfo(this.pages);
      }, 1000);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.getProfitDetailsInfo(this.userId, this.page);

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.page >= this.totalPages) {
          this.finished = true;
        }
      }, 1000);
    },
    //返佣
    onLoads() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.getRebateDetailsInfo(this.pages);

        // 加载状态结束
        this.loadings = false;

        // 数据全部加载完成
        if (this.pages >= this.talPages) {
          this.finisheds = true;
        }
      }, 1000);
    },
    leftClick() {
      this.$router.back(-1);
    },
    getProfitDetailsInfo(userId, page) {
      queryProfitDetailsInfoApi(userId, null, null, page)
        .then((res) => {
          console.log(res);
          if (res.resp_code == "000000") {
            res.result.content.filter((item) => {
              this.detailsList.push(item);
            });
            this.page = res.result.number + 1;
            this.totalPages = res.result.totalPages;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //返佣
    getRebateDetailsInfo(pages) {
      queryRebateDetailsInfoApi(this.phone, null, null, pages)
        .then((res) => {
          console.log("queryRebateDetailsInfoApi:", res);
          if (res.resp_code === "000000") {
            res.result.content.filter((item) => {
              this.rebateDetailsList.push(item);
            });
            this.pages = res.result.number + 1;
            this.talPages = res.result.totalPages;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // getPhone() {
    //   queryMobileAreaInfoApi("15827377416")
    //     .then((res) => {
    //       console.log("resphone:", res);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
  },
};
</script>
<style scoped>
.van-empty {
  position: absolute;
  top: 170px;
  right: 0;
  left: 0;
}
.item {
  margin-top: 10px;
  background-color: #fff;
  height: 100px;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 5px;
  align-items: center;
}
.item-count {
  margin-left: 10px;
  padding: 5px;
  flex: 1;
  position: relative;
}
.item-right {
  flex: 1;
  font-size: 14px;
}
.time {
  margin-top: 10px;
  font-size: 16px;
}
.money {
  color: #ff8f5f;
}
.phone {
  margin-top: 10px;
}
.model {
  color: #00aaff;
}
.imgAddress {
  position: absolute;
  z-index: 2;
  left: 0px;
}
.txtadd {
  position: absolute;
  z-index: 1;
  left: 41px;
  bottom: 16px;
  border: 1px solid #bbb;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
}
.address {
  position: absolute;
  z-index: 3;
  left: 11px;
  bottom: 42px;
  font-size: 16px;
  font-weight: 600;
  color: #444;
}
h5 {
  font-size: 14px;
}
.rebate {
  display: flex;
  margin-top: 1px;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 1px solid #efefef;
  background-color: #fff;
  height: 60px;
}
.rebateLeft {
  display: flex;
  font-size: 14px;
}
.rebateLeft div {
  margin-left: 8px;
}
.rebateLeft div p {
  padding: 3px;
}
.rebateLeft-time {
  color: #bbb;
}
.right {
  font-family: 900;
  color: #121212;
  font-size: 16px;
}
</style>